<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="order_detail.js"></script>
    <link rel="stylesheet" href="../css/commodity.css">
</head>
<body>
<button type="button" class="button" onclick="go_order_list()">订单列表</button>
<div id="order_detail">
    <div class="order_detail_container padding">
        <div class="left">订单编号:{{ order_detail.id }}</div>
        <div class="right">
            <span v-if="order_detail.status==0">未付款</span>
            <span v-if="order_detail.status==1">已付款</span>
            <span v-if="order_detail.status==2">已完成</span>
        </div>
    </div>
    <div v-for="goods in order_detail.commodity">
        <div class="order_detail_container padding">
            <div class="left"><img class="img" :src="goods.img_url"></div>
            <div class="right width">
                <div>{{ goods.name }}</div>
                <div>{{ goods.preferential }}</div>
                <div>{{ goods.classification }}</div>
                <div class="order_detail_container">
                    <div class="left">{{ goods.price }}</div>
                    <div class="right">数量{{ goods.num }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="order_detail_container padding">
        <div class="left width-35">地址</div>
        <div class="right" v-if="order_detail.status==0">
            <button type="button" class="button" @click="chose_address(order_detail.id)">选择地址</button>
        </div>
    </div>
    <div class="padding" v-if="order_detail.name">
        <div class="order_detail_container">
            <div class="left width-35">姓名</div>
            <div class="right width">
                {{ order_detail.name }}
            </div>
        </div>
        <div class="order_detail_container">
            <div class="left width-35">电话</div>
            <div class="right width">
                {{ order_detail.phone }}
            </div>
        </div>
        <div class="order_detail_container">
            <div class="left width-35">地址</div>
            <div class="right width">
                {{ order_detail.add_province }}{{ order_detail.add_city }}{{ order_detail.add_district }}
            </div>
        </div>
        <div class="order_detail_container">
            <div class="left width-35">详细地址</div>
            <div class="right width">
                {{ order_detail.add_detail }}
            </div>
        </div>
    </div>

    <div class="order_detail_container padding" >
        <div class="left">总价{{ order_detail.price_all }}</div>
        <div class="right" v-if="order_detail.status==0">
            <button type="button" class="button" @click="order_pay(order_detail.id)">支付</button>
        </div>
    </div>
</div>
</body>
</html>